<template>
  <div class="app-container flex flex-sub"
    style="background: none; height: 100%; padding: 1rem">
    <el-card shadow="never"
      class="box-card flex-sub"
      style="overflow: auto">
      <div class="div-query">
        <div class="collapse">
          <div class="collapse-header"
            @click="panelActive = !panelActive">
            <i class="collapse-header-icon"
              :class="[
                panelActive ? 'el-icon-caret-bottom' : 'el-icon-caret-top',
              ]" />
            {{ panelActive ? "隐藏" : "展开" }}查询条件
          </div>
          <div class="collapse-content">
            <el-collapse-transition>
              <div v-show="panelActive">
                <el-form size="small"
                  label-position="right">
                  <el-row>
                    <el-col :span="8">
                      <el-form-item label="网关名称"
                        label-width="120px">
                        <el-input v-model="searchModel.gatewayName"
                          placeholder="网关名称"
                          clearable
                          class="filter-item search-item" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="网关型号"
                        label-width="120px">
                        <el-input v-model="searchModel.gatewayModel"
                          placeholder="网关型号"
                          clearable
                          class="filter-item search-item" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="创建时间"
                        label-width="80px">
                        <el-date-picker v-model="createdTime"
                          type="datetimerange"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          value-format="yyyy-MM-dd HH:mm:ss">
                        </el-date-picker>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="8">
                      <el-form-item style="margin-left: 10px">
                        <el-button type="primary"
                          icon="el-icon-search"
                          @click="toSearch"
                          style="margin-right: 10px">搜索</el-button>
                        <el-button type="info"
                          icon="el-icon-delete"
                          @click="toReset">重置</el-button>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
              </div>
            </el-collapse-transition>
          </div>
        </div>
      </div>

      <div>
        <div style="margin-bottom: 8px">
          <el-button size="small"
            type="primary"
            style="margin-right: 20px"
            @click="toAdd({ id: -1 })">
            <i class="iconfont icon-xinzenghuizong"
              style="font-size: 13px;margin-right: 5px;" />
            新建网关设备
          </el-button>
        </div>

        <el-table ref="elTable"
          v-loading="loading || deleteLoading"
          border
          fit
          size="medium "
          :data="dataList"
          :row-key="(row) => row.id"
          style="width: 100%"
          :element-loading-text="deleteLoading ? '删除中,请等待...' : ''"
          @sort-change="onSortChange"
          @selection-change="onSelectionChange">
          <!-- <af-table-column
            align="center"
            type="selection"
            width="40"
            fixed
            :reserve-selection="true"
          /> -->
          <el-table-column align="center"
            type="index"
            width="60"
            fixed
            label="#"
            :index="indexMethod" />

          <af-table-column align="center"
            label="网关名称">
            <template slot-scope="{ row }">
              {{ row.gatewayName }}
            </template>
          </af-table-column>
          <af-table-column align="center"
            label="网关型号">
            <template slot-scope="{ row }">
              {{ row.gatewayModel }}
            </template>
          </af-table-column>
          <af-table-column align="center"
            label="网关位置">
            <template slot-scope="{ row }">
              {{ row.location }}
            </template>
          </af-table-column>
          <af-table-column align="center"
            label="创建人">
            <template slot-scope="{ row }">
              {{ row.createdUser }}
            </template>
          </af-table-column>
          <af-table-column align="center"
            label="创建时间"
            prop="createdTime"
            sortable
            width="180">
            <template slot-scope="{ row }">
              {{ row.createdTime }}
            </template>
          </af-table-column>

          <el-table-column align="center"
            label="操作区"
            fixed="right"
            width="150">
            <template slot-scope="{ row }">
              <el-tooltip effect="dark"
                content="详情"
                placement="top-start">
                <i class="iconfont icon-chakanxiangqing2 i-detail"
                  @click="toDetail(row)" />
              </el-tooltip>
              <i class="iconfont icon-fengefu i-fengefu" />

              <el-tooltip effect="dark"
                content="编辑"
                placement="top-start">
                <i class="iconfont icon-bianji2 i-edit"
                  @click="toAdd(row)" />
              </el-tooltip>
              <i class="iconfont icon-fengefu i-fengefu" />

              <el-tooltip effect="dark"
                content="删除"
                placement="top-start">
                <el-popconfirm :title="'确定删除【' + row.gatewayName + '】该网关设备吗？'"
                  placement="top"
                  @confirm="toSingleDelete(row, '确定')"
                  @cancel="toSingleDelete(row, '取消')">
                  <i class="iconfont icon-shanchu i-delete"
                    slot="reference" />
                </el-popconfirm>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="total > 0"
          :total="total"
          :page.sync="pagination.pageNum"
          :limit.sync="pagination.pageSize"
          :page-sizes="pageSizeOptions"
          @pagination="getDataList" />
      </div>
    </el-card>
    <gateway-add v-if="addDialogObj.isVisible"
      ref="addDialog"
      :dialog-visible="addDialogObj.isVisible"
      :title="addDialogObj.title"
      :params="params"
      :isType="addDialogObj.isType"
      @close="dialogClose()"
      @submit="afterSubmit" />
    <gateway-detail v-if="detailDialogObj.isVisible"
      ref="detailDialog"
      :dialog-visible="detailDialogObj.isVisible"
      :params="params"
      @close="dialogClose()" />
  </div>
</template>

<script>
import Pagination from "@/components/Pagination";
import dataTableMixins from "@/mixins/data-table-mixins";
import deviceManageApi from "@/api/device-manage";
import gatewayAdd from "./component/add.vue";
import gatewayDetail from "./component/detail.vue";
export default {
  name: "LinkageStrategy",
  components: {
    Pagination,
    gatewayAdd,
    gatewayDetail,
  },

  mixins: [dataTableMixins],
  data () {
    return {
      deleteLoading: false,
      popoverVisible: false,
      panelActive: false,
      deviceDictionaries: [],
      createdTime: null
    };
  },
  created () { },
  mounted () {
    this.getDataList();
  },
  methods: {
    dialogClose () {
      this.addDialogObj.isVisible = false;
      this.detailDialogObj.isVisible = false;
    },
    // getDictValueAttr() {
    //   const data = {
    //     fieldName: "collect_type",
    //     tableName: "t_equipment_collect",
    //   };
    //   deviceManageApi.getDictValueAttr(data).then((ret) => {
    //     this.deviceDictionaries = ret.data.dictValue;
    //     this.getDataList();
    //   });
    // },
    getDataList () {
      this.loading = true;

      const searchModel = this.formatSearchData(this.searchModel);
      searchModel.isNeedGridMsg = true;
      searchModel.isNeedDeptMsg = true;
      if (Array.isArray(this.createdTime)) {
        searchModel.beginTime = this.createdTime[0];
        searchModel.endTime = this.createdTime[1];
      }
      deviceManageApi
        .getGateway({ ...this.pagination, ...searchModel, ...this.sort })
        .then((ret) => {
          this.dataList = ret.data.data.rows;

          this.dataList.forEach((ele, i) => {
            this.deviceDictionaries.forEach((ele1, i1) => {
              if (Number(ele.deviceType) === ele1.dictValue) {
                ele.deviceTypeStr = ele1.dictText;
              }
            });

            ele.state = ele.state == 1 ? true : false;
          });
          this.total = ret.data.data.total;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
          this.dataList = [];
          this.total = 0;
        });
    },
    toSearch () {
      this.pagination.pageNum = 1;
      this.getDataList();
    },
    toReset () {
      this.searchModel = {};
      this.$refs.elTable.clearSort();
      this.$refs.elTable.clearFilter();
      this.toSearch();
    },
    onSortChange (val) {
      console.log(val);
      this.sort.field = val.prop;
      this.sort.order = val.order;
      this.toSearch();
    },
    onSelectionChange (selection) {
      this.selectedDataList = selection;
    },
    toEmptySelection () {
      this.$refs.elTable.clearSelection();
    },
    indexMethod (index) {
      return this.formatIndex(index, this.pagination);
    },
    toBatchDelete () {
      if (this.selectedDataList.length === 0) {
        this.$message({
          message: "请先选择需要删除的数据",
          type: "warning",
          duration: 4000,
        });
        return;
      } else {
        this.popoverVisible = true;
      }
    },
    // toBatchDeleteConfirm() {
    //   this.popoverVisible = false;
    //   const ids = [];
    //   this.selectedDataList.forEach((ele) => {
    //     ids.push(ele.id);
    //   });
    //   this.deleteConfirm(ids);
    // },
    toSingleDelete (data, type) {
      if (type === "确定") {
        this.deleteConfirm(data.id);
      }
    },
    deleteConfirm (ids) {
      // console.log("删除ids", ids);
      this.deleteLoading = true;
      deviceManageApi
        .deleteGateway(ids)
        .then(() => {
          this.$message.success("删除成功！");
          this.deleteLoading = false;
          this.toEmptySelection();
          this.toReset();
        })
        .catch(() => {
          this.deleteLoading = false;
        });
    },
    toDetail (data) {
      this.params = data;
      this.detailDialogObj.title = "网关设备 ＞详情";
      this.detailDialogObj.isVisible = true;
    },
    toAdd (data) {
      this.params = {
        item: data,
      };
      this.addDialogObj.title =
        data.id === -1 ? "网关设备 ＞添加" : "网关设备 ＞编辑";
      this.addDialogObj.isType = data.id === -1 ? 1 : 2;
      this.addDialogObj.isVisible = true;
    },
    afterSubmit (operationType) {
      this.dialogClose()
      if (operationType === 1) {
        this.toReset();
      } else {
        this.getDataList();
      }
    },
    toSwitchState (data) {
      const state = data.state ? 0 : 1;
      const model = {
        id: data.id,
        state: state,
      };

      deviceManageApi.updateTrigger(model).then((res) => {
        this.$message({
          message: "更改状态成功！",
          type: "success",
        });
        this.getDataList();
      });
    },
  },
};
</script>



<style lang="scss"  scoped>
@import "../../../../styles/part-custom";
</style>

